<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>个人简历</title>
    <style>
        body {
            font-family: SimSun, serif;
            font-size: 12px;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            border-bottom: 2px solid #2c3e50;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        
        .header h1 {
            font-size: 28px;
            color: #2c3e50;
            margin: 0 0 10px 0;
            font-weight: bold;
        }
        
        .header .title {
            font-size: 16px;
            color: #7f8c8d;
            margin-bottom: 15px;
        }
        
        .contact-info {
            text-align: center;
            font-size: 11px;
        }
        
        .contact-item {
            display: inline-block;
            margin: 0 10px;
        }
        
        .section {
            margin-bottom: 25px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
            border-bottom: 1px solid #bdc3c7;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }
        
        .summary {
            text-align: justify;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .experience-item, .education-item, .project-item {
            margin-bottom: 20px;
        }
        
        .item-header {
            margin-bottom: 8px;
        }
        
        .item-title {
            font-weight: bold;
            font-size: 14px;
            color: #2c3e50;
            float: left;
        }
        
        .item-company {
            font-size: 13px;
            color: #34495e;
            clear: left;
        }
        
        .item-date {
            font-size: 11px;
            color: #7f8c8d;
            float: right;
        }
        
        .clear {
            clear: both;
        }
        
        .item-description {
            margin-top: 8px;
            text-align: justify;
        }
        
        .item-achievements {
            margin-top: 8px;
        }
        
        .item-achievements ul {
            margin: 5px 0;
            padding-left: 20px;
        }
        
        .item-achievements li {
            margin-bottom: 3px;
        }
        
        .skill-category {
            margin-bottom: 15px;
        }
        
        .skill-category-title {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 13px;
        }
        
        .skill-item {
            margin-bottom: 5px;
        }
        
        .skill-name {
            font-size: 11px;
            display: inline-block;
            width: 120px;
        }
        
        .skill-level {
            display: inline-block;
        }
        
        .skill-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background-color: #ecf0f1;
            margin-right: 2px;
        }
        
        .skill-dot.filled {
            background-color: #3498db;
        }
        
        .project-tech {
            font-size: 11px;
            color: #7f8c8d;
            margin-top: 5px;
        }
        
        .project-links {
            margin-top: 8px;
            font-size: 11px;
        }
        
        .project-links a {
            color: #3498db;
            text-decoration: none;
            margin-right: 15px;
        }
        
        .footer {
            text-align: center;
            font-size: 10px;
            color: #95a5a6;
            margin-top: 30px;
            border-top: 1px solid #ecf0f1;
            padding-top: 15px;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .two-column-table {
            width: 100%;
        }
        
        .two-column-table td {
            width: 50%;
            vertical-align: top;
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <!-- 头部信息 -->
    <div class="header">
        <h1 th:text="${resume.name ?: '姓名'}">姓名</h1>
        <div class="title" th:text="${resume.title ?: '职位标题'}">职位标题</div>
        <div class="contact-info">
            <div class="contact-item" th:if="${resume.email}">
                <span>邮箱: </span><span th:text="${resume.email}">邮箱</span>
            </div>
            <div class="contact-item" th:if="${resume.phone}">
                <span>电话: </span><span th:text="${resume.phone}">电话</span>
            </div>
            <div class="contact-item" th:if="${resume.location}">
                <span>地址: </span><span th:text="${resume.location}">地址</span>
            </div>
            <div class="contact-item" th:if="${resume.github}">
                <span>GitHub: </span><span th:text="${resume.github}">GitHub</span>
            </div>
        </div>
    </div>
    
    <!-- 个人简介 -->
    <div class="section" th:if="${resume.summary}">
        <div class="section-title">个人简介</div>
        <div class="summary" th:text="${resume.summary}">个人简介内容</div>
    </div>
    
    <!-- 工作经验 -->
    <div class="section" th:if="${resume.experiences != null and !resume.experiences.isEmpty()}">
        <div class="section-title">工作经验</div>
        <div th:each="exp : ${resume.experiences}" class="experience-item">
            <div class="item-header">
                <div class="item-title" th:text="${exp.position}">职位</div>
                <div class="item-date" th:text="${exp.startDate + ' - ' + (exp.current ? '至今' : exp.endDate)}">时间</div>
                <div class="clear"></div>
                <div class="item-company" th:text="${exp.company}">公司</div>
            </div>
            <div class="item-description" th:if="${exp.description}" th:text="${exp.description}">工作描述</div>
            <div class="item-achievements" th:if="${exp.achievements}">
                <strong>主要成就：</strong>
                <div th:utext="${#strings.replace(exp.achievements, '\\n', '<br/>')}">成就列表</div>
            </div>
        </div>
    </div>
    
    <!-- 教育背景 -->
    <div class="section" th:if="${resume.educations != null and !resume.educations.isEmpty()}">
        <div class="section-title">教育背景</div>
        <div th:each="edu : ${resume.educations}" class="education-item">
            <div class="item-header">
                <div class="item-title" th:text="${edu.school}">学校</div>
                <div class="item-date" th:text="${edu.startDate + ' - ' + (edu.current ? '至今' : edu.endDate)}">时间</div>
                <div class="clear"></div>
                <div class="item-company" th:text="${edu.major + ' · ' + edu.degree}">专业 · 学历</div>
            </div>
            <div th:if="${edu.gpa}" class="item-description">
                <strong>GPA：</strong><span th:text="${edu.gpa}">GPA</span>
            </div>
            <div class="item-description" th:if="${edu.description}" th:text="${edu.description}">教育描述</div>
            <div class="item-achievements" th:if="${edu.achievements}">
                <strong>主要成就：</strong>
                <div th:utext="${#strings.replace(edu.achievements, '\\n', '<br/>')}">成就列表</div>
            </div>
        </div>
    </div>
    
    <!-- 技能专长 -->
    <div class="section" th:if="${resume.skills != null and !resume.skills.isEmpty()}">
        <div class="section-title">技能专长</div>
        <div th:each="skill : ${resume.skills}" class="skill-item">
            <span class="skill-name" th:text="${skill.name}">技能名称</span>
            <div class="skill-level">
                <span th:each="i : ${#numbers.sequence(1, 5)}" 
                      class="skill-dot" 
                      th:classappend="${i <= skill.level ? ' filled' : ''}">●</span>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    
    <!-- 项目经验 -->
    <div class="section" th:if="${resume.projects != null and !resume.projects.isEmpty()}">
        <div class="section-title">项目经验</div>
        <div th:each="project : ${resume.projects}" class="project-item">
            <div class="item-header">
                <div class="item-title" th:text="${project.name}">项目名称</div>
                <div class="item-date" th:if="${project.startDate}" th:text="${project.startDate + (project.endDate ? ' - ' + project.endDate : '')}">时间</div>
                <div class="clear"></div>
            </div>
            <div class="item-description" th:if="${project.description}" th:text="${project.description}">项目描述</div>
            <div class="project-tech" th:if="${project.technologies}">
                <strong>技术栈：</strong><span th:text="${project.technologies}">技术栈</span>
            </div>
            <div class="item-achievements" th:if="${project.highlights}">
                <strong>项目亮点：</strong>
                <div th:utext="${#strings.replace(project.highlights, '\\n', '<br/>')}">项目亮点</div>
            </div>
            <div class="project-links">
                <span th:if="${project.githubUrl}">GitHub: <span th:text="${project.githubUrl}">GitHub链接</span></span>
                <span th:if="${project.demoUrl}">演示: <span th:text="${project.demoUrl}">演示链接</span></span>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <div class="footer">
        <div>本简历生成于 <span th:text="${generateTime}">生成时间</span></div>
    </div>
</body>
</html>